<template>
  <el-dialog
    v-model="deleteVisible"
    align-center
    class="Vdialog"
    width="1000"
    @close="cancel"
    :close-on-click-modal="false"
    :z-index="2000"
  >
    <template #header>
      <h4 class="dialogName">日志</h4>
    </template>
    <div class="content">
      <vxe-table :data="tableData" :round="true" style="width: 100%" height="400">
        <vxe-column field="import_status" title="文件" width="240">
          <template #default="{ row }">
            <div
              class="base-text-color cursor-pointer"
              @click="handleDownload(row.filepath, row.filename)"
            >
              {{ row.filename }}
            </div>
          </template>
        </vxe-column>
        <vxe-column field="create_username" title="操作人" width="150"></vxe-column>
        <vxe-column field="create_time" title="操作日期" width="150"></vxe-column>
        <vxe-column field="op_content" title="推送结果">
          <template #default="{ row }">
            <el-tooltip
              className="item"
              effect="dark"
              :content="row.import_result"
              placement="top"
            >
              <div class="overflow-line2">{{ row.import_result }}</div>
            </el-tooltip>
          </template>
        </vxe-column>
        <vxe-column field="import_status" title="状态" width="150"></vxe-column>
      </vxe-table>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.totalResult"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total',
        ]"
        @page-change="pageChange"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button type="primary" @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VLog">
import { syncsaiheResult } from "@/api/index";
import { reactive, toRefs } from "vue";
import { downloadExternalFile } from "@/utils/downloadFile.js";

const emits = defineEmits(["cancel"]);
// 声明接收参数
const props = defineProps({
  api: { type: Function, default: () => [] },
  options: { type: String, default: "id" },
});
const data = reactive({
  deleteVisible: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    totalResult: 0,
  },
  tableData: [],
  ids: 0,
});
const { deleteVisible, page, tableData, ids } = toRefs(data);
const { api, options } = toRefs(props);
const open = async (spu_id) => {
  ids.value = spu_id;
  try {
    const res = await syncsaiheResult({ spu_id });
    tableData.value = res.data;
    page.value.totalResult = res.total;
  } catch (e) {
    throw Error(e);
  }

  deleteVisible.value = true;
};
const cancel = () => {
  deleteVisible.value = false;
  emits("cancel");
};
//分页
const pageChange = () => {
  syncsaiheResult({
    spu_id: ids.value,
    pageSize: page.value.pageSize,
    pageNum: page.value.pageNum,
  }).then((res) => {
    tableData.value = res.data;
    page.value.totalResult = res.total;
  });
};
const handleDownload = (filepath, filename) => {
  if (!filepath) return;
  downloadExternalFile(filepath, filename);
};

defineExpose({
  open,
  data,
  cancel,
});
</script>
<style lang="scss">
.Vdialog {
  .el-dialog__body {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
</style>
<style lang="scss" scoped>
.content {
  align-items: center;
  margin: 20px;
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}

.dialog-button {
  text-align: center !important;
}
</style>
